import * as React from 'react';
import Page from '../../component/page';
import SampleData from './nameDB';

import {
    //main component
    SearchBar,
    //for display data
    Panel,
    PanelHeader,
    PanelBody,
    PanelFooter,
    MediaBox,
    MediaBoxHeader,
    MediaBoxBody,
    MediaBoxTitle,
    MediaBoxDescription,
    Cell,
    CellBody,
    CellFooter,
} from '../../../build/es';

const appMsgIcon = (
    <img
        alt=""
        src=""
    />
);

const CellMore = () => (
    <Cell access link>
        <CellBody>More</CellBody>
        <CellFooter />
    </Cell>
);

const SearchBarDemo = () => {
    const [searchText, setSearchText] = React.useState('a');
    const [results, setResults] = React.useState([]);

    const handleChange = (text: string) => {
        const keywords = [text];
        let result = SampleData.filter(
            /./.test.bind(new RegExp(keywords.join('|'), 'i')),
        );

        if (result.length > 3) result = results.slice(0, 3);
        setSearchText(text);
        setResults(result);
    };

    return (
        <Page className="searchbar" title="SearchBar" subTitle="搜索栏">
            <SearchBar
                onChange={(text: string) => handleChange(text)}
                defaultValue={searchText}
                placeholder="Female Name Search"
                lang={{
                    cancel: 'Cancel',
                }}
            />

            <Panel
                style={{ display: searchText ? null : 'none', marginTop: 0 }}
            >
                <PanelHeader>Female Name Search</PanelHeader>
                <PanelBody>
                    {results.length > 0 ? (
                        results.map((item: string, i: number) => {
                            return (
                                <MediaBox key={i} type="appmsg" href="#!">
                                    <MediaBoxHeader>
                                        {appMsgIcon}
                                    </MediaBoxHeader>
                                    <MediaBoxBody>
                                        <MediaBoxTitle>{item}</MediaBoxTitle>
                                        <MediaBoxDescription>
                                            You may like this name.
                                        </MediaBoxDescription>
                                    </MediaBoxBody>
                                </MediaBox>
                            );
                        })
                    ) : (
                        <MediaBox>Cant find any！</MediaBox>
                    )}
                </PanelBody>
                <PanelFooter href="#!">
                    <CellMore />
                </PanelFooter>
            </Panel>
        </Page>
    );
};
export default SearchBarDemo;
